<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本样式</title>
    <link rel="stylesheet" type="text/css" href="../CSS/qj.css">
    <link rel="stylesheet" type="text/css" href="../CSS/jbys.css">
    <style>
        *{
            background-color: #ffffff;
            margin: 0;
            padding: 0;
        }
        .bord{
            border: 1px dashed #ee2602;
            width: 90%;
            margin: 20px auto;
        }
        .title{
            font-size: 20px;
            font-weight: bold;
            margin: 20px;
        }
        .introduce{
            font-size: 16px;
            margin: 0 0 20px 50px;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
<div class="bord">
    <div class="title">基本样式</div>
    <div class="introduce">介绍内容</div>
</div>
<div class="bord">
    <div class="title">演示效果</div>
    <div class="introduce">
        <p class="mingchen">基本样式：</p>
        <br/>
        <br/>
        <p class="slxg">颜色示例:</p>
        <pre>
    &lt;p class="ys">前景色&lt;/p&gt;

    .ys{
        color: aqua;
        }
</pre>
        <p class="ys">前景色</p>
        <pre>
    &lt;p class="ys1"&gt;背景色&lt;/p&gt;

    .ys1{
         background-color: brown;
        }
</pre>
        <p class="ys1">背景色</p>
        <hr/>
        <p class="slxg">字体示例：</p>
        <pre>
        &lt;p class="ztdx"&gt;字体大小&lt;/p&gt;

        .ztdx{
            font-size: 25px;
                }
        <p class="ztdx">字体大小</p>
        &lt;p class="ztjc11"&gt;一般加粗你好世界&lt;/p&gt;

        .ztjc1{
            font-weight: normal;
                }
        <p class="ztjc11">一般加粗你好世界</p>
        &lt;p class="ztjc2"&gt;加粗你好世界&lt;/p&gt;

        .ztjc2{
            font-weight: bold;
                }
        <p class="ztjc2">加粗你好世界</p>
        &lt;p class="ztxt"&gt;斜体你好世界&lt;/p&gt;

        .ztxt{
            font-style: italic;
                }
        <p class="ztxt">斜体你好世界</p>

         .ztxt{
            font-style: italic;
                }
        &lt;p class="zt"&gt;微软雅黑你好世界&lt;/p&gt;

        .zt{
            font-family: "微软雅黑";
                }
        <p class="zt">微软雅黑你好世界</p>
</pre>
        <br/>
        <br/>
        <p class="slxg">行高示例：</p>
        <pre>&lt;div class="hg">行高行高行高&lt;/div></pre>
        <pre>
        .hg{
            line-height: 10px;
                 }
    </pre>
        <div class="hg">行高行高行高</div>
        <br/>
        <br/>
        <p class="slxg">字符间距示例：</p>
        <pre>    &lt;p class="zfjj"&gt;你好世界&lt;/p&gt;

        .zfjj{
             letter-spacing: 10px;
                 }
    <p class="zfjj">你好世界</p>
</pre>
        <br/>
        <br/>
        <p class="slxg">文本修饰示例：</p>
        <pre>&lt;p class="xhx"&gt;你好世界&lt;/p&gt;</pre>
        <pre>
        .xhx{
            text-decoration: underline;
                 }
    </pre>
        <p class="xhx">你好世界</p>
        <pre>&lt;p class="zjx"&gt;你好世界&lt;/p&gt;</pre>
        <pre>
        .zjx{
            text-decoration: line-through;
                }
    </pre>
        <p class="zjx">你好世界</p>
        <pre>&lt;p class="sfx"&gt;你好世界&lt;/p&gt;</pre>
        <pre>
        .sfx{
            text-decoration: overline;
                 }
</pre>
        <p class="sfx">你好世界</p>
        <br/>
        <br/>
        <p class="slxg">不折行示例：</p>
        <pre>
    &lt;table style="width: 100px; height: 50px; border: 1px solid rebeccapurple" class="bzh"&gt;
        &lt;tr&gt;&lt;td&gt;不折行不折行不折行不折行不折行不折行不折行不折行&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;

        .bzh{
            white-space: nowrap;
                }
</pre>
        <table style="width: 100px; height: 50px; border: 1px solid rebeccapurple" class="bzh">
            <tr><td>不折行不折行不折行不折行不折行不折行不折行不折行</td></tr>
        </table>
        <br/>
        <br/>
        <p class="slxg">滚动条示例：</p>
        <pre>
        &lt;p style="width: 100px;height: 50px;border: 1px solid rebeccapurple" class="gdt"&gt;
        滚动条滚动条
        滚动条滚动条
        滚动条滚动条
        滚动条滚动条
        滚动条滚动条
         &lt;/p&gt;

         .gdt{
             overflow: auto;
                }
</pre>
        <p style="width: 100px;height: 50px;border: 1px solid rebeccapurple" class="gdt">
            滚动条滚动条
            滚动条滚动条
            滚动条滚动条
            滚动条滚动条
            滚动条滚动条
        </p>
        <br/>
        <br/>
        <p class="slxg">去掉下划线示例：</p>
        <pre>&lt;div class="qdxhx"&gt;&lt;a href = 'introduce.html' target = 'center'&gt;HTML&lt;/a&gt;&lt;/div&gt;</pre>
        <div class="qdxhx"><a href = 'introduce.html' target = 'center'>HTML</a></div>
        <br/>
        <br/>
        <p class="slxg">文本缩进示例：</p>
        <pre>&lt;p class="wbsj"&gt;文本缩进&lt;/p&gt;</pre>
        <p class="wbsj">文本缩进</p>
        <br/>
        <br/>
        <p class="slxg">水平对齐示例：</p>
        <pre>
&lt;div class="spzdq"&gt;
    &lt;button&gt;水平左对齐&lt;/button&gt;
&lt;/div&gt;

    .spzdq{
            text-align: left;
            }
</pre>
        <div class="spzdq">
            <button>水平左对齐</button>
        </div>

        <pre>
&lt;div class="spjz"&gt;
    &lt;button class="spjz"&gt;水平居中对齐&lt;/button&gt;
&lt;/div&gt;

    .spjz{
            text-align: center;
            }

</pre>
        <div class="spjz">
            <button class="spjz">水平居中对齐</button>
        </div>

        <pre>
&lt;div class="spydq"&gt;
    &lt;button class="spydq"&gt;水平右对齐&lt;/button&gt;
&lt;/div&gt;

    .spydq{
            text-align: right;
            }
</pre>
        <div class="spydq">
            <button class="spydq">水平右对齐</button>
        </div>
        <br/>
        <br/>
        <p class="slxg">垂直对齐示例：</p>
        <br/>
        <pre>
&lt;div class="czsdq" style="width: 200px;height: 100px;border:1px solid rebeccapurple"&gt;
    &lt;p&gt;垂直靠上&lt;/p&gt;
&lt;/div&gt;

    .czsdq{
            vertical-align: top;
            }
</pre>
        <div class="czsdq" style="width: 200px;height: 100px;border:1px solid rebeccapurple">
            <p>垂直靠上</p>
        </div>
        <br/>
        <pre>
&lt;div  style="width: 200px;height: 100px;border:1px solid rebeccapurple"&gt;
    &lt;p class="czjzdq"&gt;垂直居中&lt;/p&gt;
&lt;/div&gt;

    .czjzdq{
             line-height: 100px;;
            }
</pre>
        <div  style="width: 200px;height: 100px;border:1px solid rebeccapurple">
            <p class="czjzdq">垂直居中</p>
        </div>
    </div>
</div>
</body>
</html>